<template>
  <div>
    <el-form
      :inline="true"
      :model="filterData"
    >
      <!-- 按年/按月/按天选择 -->
      <el-form-item>
        <div id="time">
          <div @click="dateChange(0)"><span :style="{'color':timeSelect==0?' #1a7dff':'#999999'}">按天</span></div>
          <div @click="dateChange(1)"><span :style="{'color':timeSelect==1?' #1a7dff':'#999999'}">按月</span></div>
          <div @click="dateChange(2)"><span :style="{'color':timeSelect==2?' #1a7dff':'#999999'}">按年</span></div>
        </div>
      </el-form-item>

      <el-date-picker
        v-if="timeSelect==0"
        v-model="dateRange"
        style="width: 300px"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['', '']"
        :picker-options="pickerOptions"
        class="filter-item"
      />

      <el-date-picker
        v-if="timeSelect==1"
        v-model="monthRange"
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        :default-time="['', '']"
        class="filter-item"
      >
      </el-date-picker>

      <el-date-picker
        v-if="timeSelect==2"
        v-model="Startyear"
        type="year"
        placeholder="开始年份"
      >
      </el-date-picker>
      -
      <el-date-picker
        v-if="timeSelect==2"
        v-model="Endyear"
        type="year"
        placeholder="结束年份"
      >
      </el-date-picker>
      <el-form-item>
        <el-select
          v-for="(item,index) in filterData.elselect"
          :key="index"
          v-model="listQuery[item.key]"
          :placeholder="item.name"
          clearable
          :style="{'width':item.width?item.width+'px':'90px'}"
          class="filter-item"
        >
          <el-option
            v-for="i in item.option"
            :key="i.key"
            :label="i.value"
            :value="i.key"
          />
        </el-select>
      </el-form-item>

      <div class="btn">
        <el-button
          class="filter-item"
          type="primary"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          plain
          @click="handleRest"
        >
          重置
        </el-button>
      </div>
    </el-form>

  </div>

</template>
<script>
export default {
  name: "filterPane",
  props: {
    filterData: {
      type: Object,
    },
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      dateRange: ["", ""],
      monthRange: ["", ""],
      Startyear: "",
      Endyear: "",
      listQuery: {},
      timeSelect: 0,
    };
  },
  watch: {
    filterData(val) {
      console.log(val);
      if (val.elinput.length > 0) {
        val.elinput.map((item) => {
          this.listQuery[item.key] = "";
        });
      }
      if (val.elselect.length > 0) {
        val.elinput.map((item) => {
          this.listQuery[item.key] = "";
        });
      }
    },
    //缓存进页面想清空可用
    "filterData.rest": {
      handler: function (val) {
        if (val) {
          this.handleRest();
        }
      },
      deep: true,
    },
  },
  methods: {
    handleSearch() {
      const data = this.listQuery;
      if (this.dateRange && this.dateRange[0] !== "") {
        const startTime = this.dateRange[0];
        const endTime = this.dateRange[1];
        data.beginDate = startTime;
        data.endDate = endTime;
      }

      if (this.monthRange && this.monthRange[0] !== "") {
        const startMonth = this.monthRange[0];
        const endMonth = this.monthRange[1];
        data.beginMonth = startMonth;
        data.endMonth = endMonth;
      }

      if (this.Startyear !== "" && this.Endyear !== "") {
        data.Startyear = this.Startyear;
        data.Endyear = this.Endyear;
      }
      Object.keys(data).forEach(function (key) {
        if (data[key] === "") {
          delete data[key];
        }
      });
      this.$emit("filterMsg", data);
      console.log("搜索成功", this.listQuery);
    },
    handleRest() {
      const data = this.listQuery;
      Object.keys(data).forEach(function (key) {
        data[key] = "";
      });
      this.listQuery = data;
      this.dateRange = ["", ""];
      this.monthRange = ["", ""];
      this.Startyear = "";
      this.Endyear = "";
      console.log("重置成功", this.listQuery);
    },
    //按天按月按年的改变
    dateChange(n) {
      this.timeSelect = n;
      console.log("======", this.timeSelect);
    },
  },
};
</script>
<style>
#time {
  width: 152px;
  height: 36px;
  background: #fafbfc;
  border: 1px solid #dfe3e8;
  border-radius: 4px;
  padding: 2px;
  display: flex;
}
#time > div {
  width: 48px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  margin-right: 2px;
}
#time > div > span {
  width: 28px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei, MicrosoftYaHei-MicrosoftYaHei;
  font-weight: normal;
  text-align: left;
  color: #999999;
  line-height: 14px;
}

.filter-item {
  margin-left: 10px;
  display: inline-block;
}
.filter-container .filter-item:nth-of-type(1) {
  margin-left: 0px;
}
.btn {
  display: inline-block;
  margin-left: 10px;
}
</style>